<template>
  <div class="app-wrapper">
        <VideoPlayer></VideoPlayer>
        <div class="tab">
            <TabHeader
                :channels="channels"
                :test="test"
            ></TabHeader>   
            <div class="tab-body over-hidden">
                <div class="tab_track" ref="tabTrack" :style="{width: channels.lists.length * 100 + '%',transform: 'translate3d('+trackStyleLeft+'px,0,0)'}"> 
                    <Interact></Interact>
                    <div class="tab-body-item"></div>
                    <div class="tab-body-item"></div>
                    <div class="tab-body-item"></div>
                </div>
            </div> 
        </div>
  </div>
</template>

<script>
import VideoPlayer from '@/components/Live/VideoPlayer2.vue';
import TabHeader from '@/components/ChanelTabHeader.vue';
import Interact from './Channels/Interact';
export default {
    components: {
        VideoPlayer,
        TabHeader,
        Interact
    },
    props: {},
    data() {
        return {
            channels: {
                active: 'interact',
                lists: [
                    {'name': 'interact',    text: '拍卖互动',      index: 0},
                    {'name': 'style',       text: '拍卖方式',      index: 1},
                    {'name': 'watching',    text: '边买边看',      index: 2},
                    {'name': 'pathway',     text: '付款通道',      index: 3}
                ]
            },
        };
    },
    computed: {
        trackStyleLeft(){
        let width = window.innerWidth;
        let index = this.channels.lists.findIndex(item=>{
            return item.name == this.channels.active;
        });
        return -width * index;
        }
    },
    methods: {},
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.tab_track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: all ease .3s;
  .tab-body-item {
    flex: 1;
    height: 100%;
  }
}
</style>